<template>
  <div>
    <div class="header">
      <el-col :span="3" :push="1">
        <el-select v-model="states" value-key="states" @change="changeState()" style="margin-top: 10px;width:78%" placeholder="请选择费用类别">
          <el-option v-for="item in options" :key="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" :push="2">
        <el-input style="margin-top:10px" v-model="search" @change="searchPage()"
                  oninput="value=value.replace(/\s*/g, '')" placeholder="用途" suffix-icon="el-icon-search"></el-input>
      </el-col>
      <el-col :span="2" :push="3">
        <el-button icon="el-icon-refresh" style="margin-top:10px" @click="reset">重置</el-button>
      </el-col>
      <el-col :span="2" :push="4">
        <el-button icon="el-icon-circle-plus" style="margin-top:10px" @click="raise">新建</el-button>
      </el-col>
    </div>
    <el-table :data="tableData" style="width:100%" :default-sort = "{prop: 'expsDate', order: 'descending'}">
      <el-table-column prop="expsId" type="selection"></el-table-column>
      <el-table-column align="left" prop="apply" label="经手人">
        <template slot-scope="d">
          <span class="href" @click="read(d.row.expsId)">
            <i class="el-icon-s-promotion"></i>
            {{d.row.apply}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="customerByCustomId.cusName" label="客户"></el-table-column>
      <el-table-column prop="expsPurpose" label="用途"></el-table-column>
      <el-table-column prop="expsDate" sortable label="日期">
        <template slot-scope="s">
          {{s.row.expsDate | formatDate}}
        </template>
      </el-table-column>
      <el-table-column prop="expsMoney" label="金额"></el-table-column>
      <el-table-column prop="expsSort" label="费用类别"></el-table-column>
      <el-table-column prop="cutName" width="80" label="审批状态"></el-table-column>
      <el-table-column prop="expsRefus" width="80" label="报销">
        <template slot-scope="s">
          {{s.row.expsRefus | formatState}}
        </template>
      </el-table-column>
      <el-table-column prop="approved" label="审批人"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="s">
          <i class="el-icon-edit" v-if="s.row.cutName == '待审批'" title="修改" style="font-size:17px;cursor:pointer" @click="update(s.row.expsId)"></i>
          <i class="el-icon-delete" v-if="s.row.cutName == '待审批'" title="删除" style="font-size:17px;cursor:pointer" @click="deleteExpsId(s.row.expsId)"></i>
          <i class="el-icon-printer" title="打印" style="font-size:17px;cursor:pointer" @click="printExpsId(s.row.expsId)"></i>
          <i class="iconfont icon-jinqian" v-if="s.row.cutName == '同意'" title="报销" @click="dispatch(s.row.expsId)" style="font-size:17px;cursor:pointer"></i>
          <i class="el-icon-refresh-left" v-if="s.row.cutName == '待审批'" title="撤销"style="font-size:17px;cursor:pointer" @click="revoke(s.row.expsId)"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog title="费用明细" :visible.sync="dialogFormVisible" width="68%">
      <hr class="border-t-a"/>
      <el-form :model="expense" :rules="rules" ref="expense" label-width="80" style="margin-left: 40px">
        <el-row :gutter="38">
          <el-col :span="12">
            <el-form-item label="金额" style="margin-left:28px" prop="expsMoney">
              <el-input style="width:260px" onkeyup="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')" v-model="expense.expsMoney" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="票据张数" prop="expsNote">
              <el-input style="width:260px" v-model="expense.expsNote" onkeyup="value=value.replace(/\D/g, '')" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="费用类别" prop="expsSort">
              <el-select v-model="expense.expsSort" style="width: 260px" filterable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期" prop="expsDate" style="margin-left: 28px">
              <el-date-picker
                v-model="expense.expsDate"
                align="right"
                type="datetime"
                style="width: 260px"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="用途" style="margin-left:37px">
          <el-input
            type="textarea"
            autosize
            v-model="expense.expsPurpose"
            style="width:700px">
          </el-input>
        </el-form-item>
        <el-form-item label="客户" style="margin-left:26px" prop="customerByCustomId.customId">
          <el-select v-model="expense.customerByCustomId.customId"
                     value-key="expense.customerByCustomId.customId"
                     style="width: 700px" filterable remote
                     placeholder="请选择客户">
            <el-option v-for="cus in customerList" :key="cus.customId" :label="cus.cusName" :value="cus.customId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" style="margin-left:37px">
          <el-input style="width:700px" v-model="expense.expsRemark" autocomplete="off"></el-input>
        </el-form-item>
        <el-row>
          <el-col>
            <el-form-item label="审批人" style="margin-left:13px" prop="empId">
              <el-select v-model="expense.empId" style="width:700px">
                <el-option-group
                  v-for="group in approvalList"
                  :key="group.postName"
                  :label="group.postName">
                  <el-option
                    v-for="item in group.empVos"
                    :key="item.employeesId"
                    :label="item.empName"
                    :value="item.employeesId">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经手人" style="margin-left:24px">
              <el-input style="width:260px" v-model="expense.empByEmployeesId.empName" :readonly="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批状态" style="margin-left:26px">
              <el-input style="width:260px" v-model="expense.cucheckTypeByCutId.cutName" :readonly="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="人数" style="margin-left:37px">
              <el-input v-model="expense.expsNumber" onkeyup="value=value.replace(/\D/g, '')" style="width:260px" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票类别" style="margin-left: 10px">
              <el-select v-model="expense.expsGenre" style="width: 260px" filterable placeholder="请选择">
                <el-option
                  v-for="item in option"
                  :key="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="发票税率" style="margin-left: 5px">
              <el-select v-model="expense.expsRate" style="width: 260px" filterable placeholder="请选择">
                <el-option
                  v-for="item in optiont"
                  :key="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报销" style="margin-left:35px">
              <el-input readonly value="" v-if="expense.expsRefus==''" style="width: 260px"></el-input>
              <el-input readonly value="未报销" v-if="expense.expsRefus==1" style="width: 260px"></el-input>
              <el-input readonly value="已报销" v-if="expense.expsRefus==2" style="width: 260px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button style="margin-left: 750px" @click="addExps('expense')" icon="el-icon-check">保存</el-button>
    </el-dialog>
    <!-- 查看弹框 -->
    <el-dialog title="费用明细" :visible.sync="dialogFormTwo" custom-class="dialog_color" width="60%">
      <hr class="border-t-a"/>
      <el-form :model="expense" label-width="100px" label-position="right" style="margin-left: 40px">
        <el-row :gutter="38">
          <el-col :span="12">
            <el-form-item label="金额">
              {{expense.expsMoney}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="票据张数">
              {{expense.expsNote}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="费用类别">
              {{expense.expsSort}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期">
              {{expense.expsDate | formatData}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="用途">
          {{expense.expsPurpose}}
        </el-form-item>
        <el-form-item label="客户">
          {{expense.customerByCustomId.customId}}
        </el-form-item>
        <el-form-item label="备注">
          {{expense.expsRemark}}
        </el-form-item>
        <el-row>
          <el-col>
            <el-form-item label="审批人">
              {{empName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经手人">
              {{expense.empByEmployeesId.empName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批状态">
              {{expense.cucheckTypeByCutId.cutName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="人数">
              {{expense.expsNumber}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票类别">
              {{expense.expsGenre}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发票税率">
              {{expense.expsRate}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报销">
              {{expense.expsRefus | formatState}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2" style="margin-left: 30px">
            <span>审批操作</span>
          </el-col>
          <el-col :span="18" style="margin-left: 10px">
            <el-timeline :reverse="false">
              <el-timeline-item
                v-for="(activity, index) in checkDetailsList"
                :key="index">
                {{activity.apprsDate | formatData}} {{activity.empByEmployeesId.empName}} {{activity.cucheckTypeByCutId.cutName}}
              </el-timeline-item>
            </el-timeline>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-row style="background-color: white">
      <div class="limit">
        <el-pagination
          :current-page.sync="currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @current-change="changePage"
          @size-change="sizeChange">
        </el-pagination>
        <p></p>
      </div>
    </el-row>
    <el-row style="height: 500px;background-color:white">
      <el-row style="font-size: 12px;font-weight: 600;margin-top: 20px">
        <el-col :span="12" :push="1">
          <span><b>分布</b></span>
        </el-col>
        <el-col :span="10">
          <span style="margin-left: 20px"><b>Top</b></span>
        </el-col>
      </el-row>
      <el-col :span="12">
        <!-- 饼状图 -->
        <div style="height:400px" ref="pieCharts"></div>
        <div>
          <el-select style="margin-left: 150px;width: 300px" v-model="pieSelect" value-key="pieSelect" @change="changePieChart">
            <el-option v-for=" p in pieChartOptions" :key="p.value" :label="p.label" :value="p.value"></el-option>
          </el-select>
        </div>
      </el-col>
      <!-- 柱状图 -->
      <el-col :span="11">
        <div style="height:400px" ref="barCharts"></div>
        <div>
          <el-select style="margin-left:150px;width: 300px" v-model="barSelect" value-key="barSelect" @change="changeBarChart">
            <el-option v-for=" p in barChartOptions" :key="p.value" :label="p.label" :value="p.value"></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "AsExpenses",
    data: function () {
      return {
        tableData: [],
        expense: {
          expsId:'',
          expsRefus:'',
          expsDate:'',
          expsMoney:'',
          expsSort:'',
          expsNote:'',
          expsPurpose:'',
          expsRemark:'',
          expsNumber:'',
          expsGenre:'',
          expsRate:'',
          expsDelete:'',
          empId:'',
          customerByCustomId:{
            customId:'',
            cusName:''
          },
          cucheckTypeByCutId:{
            cutId:'',
            cutName:''
          },
          empByEmployeesId:{
            employeesId:'',
            empName:''
          }
        },
        customerList:[],  //客户列表
        empList:[],       //员工列表
        approvalList:[],  //审批人
        postLevelList: [],//部门角色列表
        repairMonthList: [],//饼状图数据
        deliveredList: [],//柱状图数量
        checkDetailsList: [],//审批记录列表
        deliveredMonthList: [],//柱状图月份
        states:'',        //下拉框
        search:'',        //按条件查询
        user: {},         //当前登录用户信息
        empIds:'',        //员工id
        empName:'',       //审批人
        pieSelect: 1,     //饼状图选择器
        barSelect: 1,     //柱状图选择器
        apprId: '',       //审批表id
        deptId: '',       //记录部门id
        //分页
        currPage: 1,     //当前页
        totalSize: 0,    //总条数
        pageSize: 5,     //页大小
        dialogFormVisible: false,
        dialogFormTwo: false,
        options: [{
          value: '选项1',
          label: '餐饮'
        }, {
          value: '选项2',
          label: '交通'
        }, {
          value: '选项3',
          label: '通讯'
        }, {
          value: '选项4',
          label: '礼品'
        }, {
          value: '选项5',
          label: '办公'
        }, {
          value: '选项6',
          label: '活动'
        }, {
          value: '选项7',
          label: '其它'
        }],
        option: [{
          value: '选项1',
          label: '普通发票'
        }, {
          value: '选项2',
          label: '增值税专用发票'
        }],
        pieChartOptions:[{
          value: 1,
          label: '费用类型分布'
        }, {
          value: 2,
          label: '全年费用/人员分布（已审核）'
        }],
        barChartOptions:[{
          value: 1,
          label: '月度费用申报统计'
        }, {
          value: 2,
          label: '客户费用（已审核）统计'
        }],
        optiont: [{
          value: '选项1',
          label: '1%'
        }, {
          value: '选项2',
          label: '2%'
        }, {
          value: '选项3',
          label: '3%'
        }, {
          value: '选项4',
          label: '4%'
        }, {
          value: '选项5',
          label: '5%'
        }, {
          value: '选项6',
          label: '6%'
        }, {
          value: '选项7',
          label: '7%'
        }, {
          value: '选项8',
          label: '8%'
        }, {
          value: '选项9',
          label: '9%'
        }, {
          value: '选项10',
          label: '10%'
        }],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        //表单校验
        rules: {
          expsMoney: [
            { required: true, message: '请输入具体金额', trigger: 'blur' },
          ],
          expsNote: [
            { required: true, message: '请输入票据张数', trigger: 'blur' },
          ],
          expsSort: [
            {required: true, message: '请选择费用类别', trigger: 'change' },
          ],
          'customerByCustomId.customId': [
            {required: true, message: '请选择客户', trigger: 'change' },
          ],
          expsDate: [
            {required: true, message: '请选择日期', trigger: 'change' }
          ],
          empId: [
            {required: true, message: '请选择审批人', trigger: 'change' },
          ]
        }
      }
    },
    created:function() {
      this.user = JSON.parse(sessionStorage.getItem('user'));
      this.empIds = this.user.employeesId;//当前登录用户id
      this.authentication();//验证用户身份

      this.$axios.get("http://localhost:8088/crm/check-all"
      ).then(v=>{
        this.customerList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })

      this.$axios.get("http://localhost:8088/exs/check-emp"
      ).then(v=>{
        this.empList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })

      this.$axios.get("http://localhost:8088/buDetailsTwo/approval"
      ).then(v=>{
        this.approvalList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })
    },
    methods: {
      //验证用户身份
      authentication() {
        var id = JSON.parse(sessionStorage.getItem('user')).employeesId;//用户id
        //获取用户是否是一级角色
        this.$axios.get("http://localhost:8088/is_one_Role",
          {
            params: {
              empId: id
            }
          }).then(v => {
            this.deptId = v.data.deptId;//记录部门id
            if (v.data.postLevel == 1) {//用户是一级角色
              //查询出能看到的部门信息
              if (v.data.deptId == 1) {
                this.empIds = null;
                this.deptId = null;
                this.initData(null, null, this.states, this.search, this.currPage, this.pageSize);
              }else{
                this.empIds = null;
                this.initData(null, this.deptId, this.states, this.search, this.currPage, this.pageSize);
              }
            }else{//用户是普通角色
              this.initData(id, this.deptId, this.states, this.search, this.currPage, this.pageSize);
            }

          this.pieChartOne();
          this.barChartOne();
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      },
      initData(employeesId, fatherDeptId, states, search, currPage, pageSize) {
        this.$axios.get("http://localhost:8088/exs/exps-page",
          {
            params: {
              employeesId: employeesId,
              fatherDeptId : fatherDeptId,
              states: states,
              search: search,
              currPage: currPage,
              pageSize: pageSize
            }
          }
        ).then(v => {
          this.tableData = v.data.rows;
          this.totalSize = v.data.total;
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      },
      changePage(currPage) {
        this.initData(this.empIds, this.deptId, this.states, this.search, currPage, this.pageSize);
      },
      changeState() {
        this.initData(this.empIds, this.deptId, this.states, this.search, this.currPage, this.pageSize);
      },
      searchPage() {
        this.initData(this.empIds, this.deptId, this.states, this.search, this.currPage, this.pageSize);
      },
      sizeChange (pageSize) { //改变页大小
        this.pageSize = pageSize;
        this.initData(this.empIds, this.deptId, this.states, this.search, this.currPage, pageSize);
      },
      reset(){//重置
        this.states = '';
        this.search = '';
        this.initData(this.empIds, this.deptId, this.states, this.search, this.currPage, this.pageSize);
      },
      pieChartOne(){
        this.$axios.get("http://localhost:8088/exs/exps-sort",
        {params:{employeesId: this.empIds, fatherDeptId: this.deptId}}
        ).then(v=>{//费用类型分布
          this.repairMonthList = v.data;
        })
      },
      pieChartTwo(){
        this.$axios.get("http://localhost:8088/exs/exps-money",
          {params:{employeesId: this.empIds, fatherDeptId: this.deptId}}
        ).then(v=>{//全年费用/人员分布（已审核）
          this.repairMonthList = v.data;
        })
      },
      changePieChart(){
        this.repairMonthList = [];
        if(this.pieSelect == 1){
          this.pieChartOne();
        }else if(this.pieSelect == 2){
          this.pieChartTwo();
        }
      },
      pieChart(){
        let myChart = this.$echarts.init(this.$refs.pieCharts);//显示
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series: [{
            name: '分布',
            type: 'pie',
            radius: '74%',
            center: ['50%', '50%'],
            clockwise: false,
            data: this.repairMonthList,
            label: {
              normal: {
                textStyle: {
                  color: '#999',
                  fontSize: 14,
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 4,
                borderColor: '#ffffff',
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }],
          color: [
            '#00acee',
            '#52cdd5',
            '#79d9f1',
            '#a7e7ff',
            '#c8efff'
          ],
          backgroundColor: '#fff'
        })
      },
      barChartOne(){
        this.$axios.get("http://localhost:8088/exs/month-money",
          {params:{employeesId: this.empIds, fatherDeptId: this.deptId}}
        ).then(v=>{//月度费用申报统计数
          this.deliveredList = v.data;
        })

        this.$axios.get("http://localhost:8088/exs/exps-month",
          {params:{employeesId: this.empIds, fatherDeptId: this.deptId}}
        ).then(v=>{//月度费用申报统计月份
          this.deliveredMonthList = v.data;
        })
      },
      barChartTwo(){
        this.$axios.get("http://localhost:8088/exs/custom-sum",
          {params:{employeesId: this.empIds, fatherDeptId: this.deptId}}
        ).then(v=>{//客户费用（已审核）统计数
          this.deliveredList = v.data;
        })

        this.$axios.get("http://localhost:8088/exs/exps-custom",
          {params:{employeesId: this.empIds, fatherDeptId: this.deptId}}
        ).then(v=>{//客户费用（已审核）统计客户
          this.deliveredMonthList = v.data;
        })
      },
      changeBarChart(){
        this.deliveredList = [];
        this.deliveredMonthList = [];
        if(this.barSelect == 1){
          this.barChartOne();
        }else if(this.barSelect == 2){
          this.barChartTwo();
        }
      },
      barChart(){
        let myChart = this.$echarts.init(this.$refs.barCharts);//显示
        myChart.setOption({
          color: ['#3b9ffc'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '30',
            right: '30',
            bottom: '20',
            containLabel: true
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
          },
          calculable: true,
          xAxis: {
            splitLine: {
              show: false
            }, //去除网格线
            splitArea: {
              show: false
            }, //保留网格区域
            axisLine: {
              show: true,
              lineStyle: { //轴上的线样式
                color: '#808492',
                width: 0.6, //这里是为了突出显示加上的
              },
            },
            axisTick: {
              show: true
            },
            axisLabel: { //轴上的数据样式
              color: '#808492',
            },
            data: this.deliveredMonthList,
          },
          yAxis: {
            show: true,
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(33,148,246,0.2)'
              }
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: '#808492'
              }
            }
          },
          series: [{
            type: 'bar',
            barWidth: 15, // 柱形的宽度
            barGap: 0,
            data: this.deliveredList,
          },
            {
              type: 'line',
              data: this.deliveredList,
              symbol: 'none',
              symbolSize: '10',
              name: '总计',
              lineStyle: {
                //折线样式
                color: "#ffc83b"
              },
            }
          ]
        })
      },
      /*empChange(item) {//获取员工id
        if (this.empId != '') {
          this.empId = item[1];
        } else {
          this.empId = 0;
        }
      },*/
      raise(){
        this.dialogFormVisible = true;
        this.clear();
        this.$axios.get("http://localhost:8088/exs/postLevel-emp",
          {params:{employeesId:this.user.employeesId}}
        ).then(v=>{
          this.postLevelList = v.data;
          if(this.postLevelList[0].deptsId == 1 && this.postLevelList[0].postLevel == 1){
            this.$axios.get("http://localhost:8088/exs/ordinary-boss"
            ).then(v => {
              this.expense.empId = v.data;
            }).catch(v => {
              alert("访问失败!" + v.data);
            })
          }else {
            if (this.postLevelList[0].postLevel == 1) {
              this.$axios.get("http://localhost:8088/exs/ordinary-one",
                {params: {deptsId: this.postLevelList[0].deptsId}}
              ).then(v => {
                this.expense.empId = v.data;
              }).catch(v => {
                alert("访问失败!" + v.data);
              })
            }
            if (this.postLevelList[0].postLevel == 2) {
              this.$axios.get("http://localhost:8088/exs/ordinary-two",
                {params: {deptsId: this.postLevelList[0].deptsId}}
              ).then(v => {
                this.expense.empId = v.data;
              }).catch(v => {
                alert("访问失败!" + v.data);
              })
            }
          }
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })
      },
      addExps(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.expense.empByEmployeesId.employeesId = this.user.employeesId;//当前登录用户id
            this.$axios.post("http://localhost:8088/exs/save-exps",{
              expsId:this.expense.expsId,
              expsDate:this.expense.expsDate,
              expsMoney:this.expense.expsMoney,
              expsSort:this.expense.expsSort,
              expsRefus:this.expense.expsRefus,
              expsNote:this.expense.expsNote,
              expsPurpose:this.expense.expsPurpose,
              expsRemark:this.expense.expsRemark,
              expsNumber:this.expense.expsNumber,
              expsGenre:this.expense.expsGenre,
              expsRate:this.expense.expsRate,
              expsDelete:this.expense.expsDelete,
              customerByCustomId:this.expense.customerByCustomId,
              cucheckTypeByCutId:this.expense.cucheckTypeByCutId,
              empByEmployeesId:this.expense.empByEmployeesId,
              empId:this.expense.empId
            }).then(v=>{
              this.$message.success("新增成功");
              this.dialogFormVisible = false;
              this.clear();
              this.initData(this.empIds, this.deptId, this.states, this.search, this.currPage, this.pageSize);
            }).catch(v=>{
              alert("访问失败!"+v.data);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      read(expsId){
        this.checkDetailsList = [];
        this.$axios.get("http://localhost:8088/exs/update-exps",
          {params:{expsId:expsId}}
        ).then(v=>{
          this.dialogFormTwo = true;
          this.expense = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })

        this.$axios.get("http://localhost:8088/exs/check-empId",
          {params:{expsId:expsId}}
        ).then(v=>{
          this.empName = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })

        let apprTitle = '费用报销';
        this.$axios.get("http://localhost:8088/che/deliver-id",
          {params:{apprTitle:apprTitle, apprIds:expsId}}
        ).then(v=>{
          this.checkDetailsList = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })
      },
      revoke(expsId){//撤销
        this.$confirm('此操作将永久撤销审批, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var title = "费用报销";
          this.$axios.get("http://localhost:8088/che/check-id",
            {params: {apprTitle:title, apprIds:expsId}}
          ).then(v => {
            this.apprId = v.data;
            this.$axios.get("http://localhost:8088/exs/revoke-id",
              {params:{apprId:this.apprId,expsId:expsId,empId:this.empIds}}
            ).then(()=>{
              this.$message({
                type: 'success',
                message: '撤销成功!'
              });
              //刷新数据
              this.initData(this.empIds, this.deptId, this.states, this.search, this.currPage, this.pageSize);
            }).catch(v=>{
              alert("访问失败!"+v.data);
            })
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      update(expsId){
        this.$axios.get("http://localhost:8088/exs/update-exps",
          {params:{expsId:expsId}}
        ).then(v=>{
          this.dialogFormVisible = true;
          this.expense = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })
      },
      deleteExpsId(expsId){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var title = "费用报销";
          this.$axios.get("http://localhost:8088/che/check-id",
            {params: {apprTitle:title, apprIds:expsId}}
          ).then(v => {
            this.apprId = v.data;
            this.$axios.get("http://localhost:8088/exs/delete-exps",
              {params: {apprId:this.apprId,expsId:expsId}}
            ).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //刷新数据
              this.initData(this.empIds, this.deptId, this.states, this.search, this.currPage, this.pageSize);
            }).catch(v => {
              alert("访问失败!" + v.data);
            })
          }).catch(v => {
            alert("访问失败!" + v.data);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      dispatch(expsId){//报销
        this.$axios.get("http://localhost:8088/exs/dispatch-id",
          {params: {expsId:expsId}}
        ).then(() => {
          this.$message.success("报销成功");
          this.initData(this.empIds, this.deptId, this.states, this.search, this.currPage, this.pageSize);
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      },
      printExpsId(expsId){//打印单据
        this.$router.push({
          path:'/print',
          query:{
            expsId:expsId
          }
        })
      },
      clear() {
        this.expense = {
          expsId:'',
          expsRefus:'',
          expsDate:'',
          expsMoney:'',
          expsSort:'',
          expsNote:'',
          expsPurpose:'',
          expsRemark:'',
          expsNumber:'',
          expsGenre:'',
          expsRate:'',
          expsDelete:'',
          empId:'',
          customerByCustomId:{
            customId:'',
            cusName:''
          },
          cucheckTypeByCutId:{
            cutId:'',
            cutName:''
          },
          empByEmployeesId:{
            employeesId:'',
            empName:''
          }
        };
      }
    },
    mounted () {
      setTimeout(()=>{this.pieChart()},500);
      setTimeout(()=>{this.barChart()},500);
    },
    watch: {
      repairMonthList(val) {
        this.pieChart();
      },
      deliveredMonthList(val){
        this.barChart();
      },
      deliveredList(val){
        this.barChart();
      }
    },
    filters: {
      formatState(refus){
        if(refus != null && refus != ''){
          if(refus == 1){
            return "未报销"
          }
          if(refus == 2){
            return "已报销"
          }
        }
      },
      formatDate(time){
        let date   = new Date(time);//把定义的时间赋值进来进行下面的转换
        let year   = date.getFullYear();
        let month  = date.getMonth()+1;
        let day    = date.getDate();
        let hour   = date.getHours();
        let minute = date.getMinutes();
        let second = date.getSeconds();
        return year+"-"+month+"-"+day;
        /*return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;*/
      },
      formatData(time){
        let date   = new Date(time);//把定义的时间赋值进来进行下面的转换
        let year   = date.getFullYear();
        let month  = date.getMonth()+1;
        let day    = date.getDate();
        let hour   = date.getHours();
        let minute = date.getMinutes();
        let second = date.getSeconds();
        return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
      }
    }
  }
</script>

<style scoped>
  .header{
    border: 0px solid white;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    background: white;
  }
  .limit{
    margin-top:10px;
    margin-left:340px;
  }
  .border-t-a {
    border-top: 1px solid #aaaaaa;
    margin-top: -20px;
    margin-bottom: 30px;
  }
  .href{
    color:#009EFB;
    cursor: pointer;
  }
</style>
